import type { Metadata } from 'next';
import Link from 'next/link';
import { ComponentGrid } from '@/components/detail/ComponentGrid';
import { ScopeHeader } from '@/components/detail/ScopeHeader';
import { ScopePressureChart } from '@/components/detail/ScopeCharts';
import { LatencyMatrixTable, LinkList, ProbesTable } from '@/components/detail/Tables';
import { IncidentsSection } from '@/components/incidents/IncidentsSection';
import { Section, Stat } from '@/components/ui/primitives';
import { apiGet, apiTry } from '@/lib/api';
import { fmt, fmtDelta, fmtInt, fmtPct } from '@/lib/format';
import type { RegionDetailResponse } from '@/lib/types';

export const dynamic = 'force-dynamic';

type Params = Promise<{ region: string }>;

export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
  const { region } = await params;
  const r = await apiTry<RegionDetailResponse>(`/api/v1/pressure/region/${encodeURIComponent(region)}`);
  if (!r) return { title: 'Region' };
  return { title: `${r.name} — Internet pressure ${fmt(r.pressure)} (${r.level_label})`, description: `Live Internet pressure for ${r.name}: ${fmt(r.pressure)} ${r.level_label}, ${fmtDelta(r.delta_1h)} over 1 h. ${r.probes.length} probes, ${r.targets} anchored targets.`, alternates: { canonical: `/internet/${region}` } };
}

export default async function RegionPage({ params }: { params: Params }) {
  const { region } = await params;
  const r = await apiGet<RegionDetailResponse>(`/api/v1/pressure/region/${encodeURIComponent(region)}`);
  const last24 = r.history_24h.points;
  const first = last24[0]?.pressure;
  const change24 = first != null ? r.pressure - first : null;
  return (
    <div className="pb-8">
      <ScopeHeader
        kicker={`Region · ${r.continent}`}
        title={r.name}
        subtitle={
          <>
            Source view from {r.probes.length} probe{r.probes.length === 1 ? '' : 's'} blended with the destination view toward {fmtInt(r.targets)} anchored targets · role {r.role}
            {!r.coverage_ok && <span className="text-warn"> · weak coverage — conclusions damped</span>}
          </>
        }
        pressure={r.pressure}
        level={r.level}
        delta1h={r.delta_1h}
        trend={r.trend}
        confidence={r.confidence}
        meta={
          <>
            <span>
              Δ24h <span className="text-ink">{fmtDelta(change24)}</span>
            </span>
            <span>
              7d median <span className="text-ink">{fmt(r.baseline_7d.median)}</span> · p90 <span className="text-ink">{fmt(r.baseline_7d.p90)}</span>
            </span>
            <span>
              centroid <span className="text-ink">{r.lat}, {r.lon}</span>
            </span>
          </>
        }
      />

      <Section label="Components">
        <ComponentGrid components={r.components} />
        {r.components.routing == null && <p className="mt-2 text-[11.5px] text-ink-3">Routing is not attributable to this region (no ASN attribution) — shown as n/a, not zero.</p>}
      </Section>

      <Section label="24 h" right={<span>vs 7-day baseline</span>}>
        <ScopePressureChart series={r.history_24h} baseline={r.baseline_7d} height={240} />
      </Section>

      <div className="grid grid-cols-[minmax(0,1fr)] gap-x-10 lg:grid-cols-2">
        <Section label="Top ASNs" className="min-w-0">
          <LinkList items={r.top_asns.map((a) => ({ key: String(a.asn), name: a.name, pressure: a.pressure, sub: `AS${a.asn}` }))} hrefFor={(k) => `/asn/${k}`} label="ASNs" />
        </Section>
        <Section label="Services observed" className="min-w-0">
          <LinkList items={r.top_services.map((s) => ({ key: s.slug, name: s.name, pressure: s.pressure, sub: `avail ${fmtPct(s.observed_availability_24h, 2)}` }))} hrefFor={(k) => `/service/${k}`} label="services" />
        </Section>
      </div>

      <Section label="Latency matrix" right={<span>pairs from/to this region · z vs baseline</span>}>
        <LatencyMatrixTable rows={r.matrix} highlight={r.id} />
      </Section>

      <Section label="Incidents" right={<Link href="/incidents" className="hover:text-ink">all incidents →</Link>}>
        <IncidentsSection incidents={r.incidents} />
      </Section>

      <Section label="Probe coverage">
        <div className="mb-3 grid grid-cols-3 gap-4 sm:grid-cols-4">
          <Stat label="probes" value={fmtInt(r.probes.length)} />
          <Stat label="targets" value={fmtInt(r.targets)} />
          <Stat label="confidence" value={`${Math.round(r.confidence * 100)} %`} />
          <Stat label="coverage" value={r.coverage_ok ? 'ok' : 'weak'} />
        </div>
        <ProbesTable probes={r.probes} compact />
      </Section>
    </div>
  );
}